<template>
  <div>
    <div style='margin-bottom: 20px;margin-top: 20px'>
      <el-form
        :inline="true"
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
        style="width: 100%"
      >

          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input v-model="formLabelAlign.region"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formLabelAlign.type"></el-input>
          </el-form-item>
        <div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </div>

      </el-form>
    </div>
    <div class='flex-row' style='margin-bottom: 10px'>
      <el-button type="primary" plain @click="addUser">新增用户</el-button>
      <el-button type="success" plain @click='handleUpdate'>修改用户</el-button>
      <el-button type="danger" plain @click='handleDelete'>删除用户</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" @select='selects' ref="scTable">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="用户ID" width="180" />
      <el-table-column prop="username" label="用户号" width="180" />
      <el-table-column prop="usernamezh" label="姓名" width="180" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="birthAddress" label="籍贯" />
      <el-table-column prop="address" label="家庭住址" />
      <el-table-column prop="level" label="角色" />
      <el-table-column prop="cardNumber" label="身份号码" />
      <el-table-column prop="phonenumber" label="手机号" />
    </el-table>
    <div>
      <el-pagination
        v-model:currentPage="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[10,20,30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totaluser"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="form.title"   >
      <el-form :model="form" label-width="120px" ref="userForm">
        <el-form-item label="姓名">
          <el-input v-model="form.usernamezh"></el-input>
        </el-form-item>
        <el-form-item label="用户号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-col :span="11">
            <el-date-picker
              v-model="form.birthdate"
              type="date"
              placeholder="Pick a date"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="性别">
          <el-checkbox-group v-model="form.type">
            <el-checkbox  label="男" name="type" :checked=form.mbool></el-checkbox>
            <el-checkbox  label="女" name="type" :checked=form.wbool></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="户籍">
          <el-input v-model="form.birthAddress" placeholder="例如:安徽"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.cardNumber"  :disabled = "disableShow"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.level" placeholder="请选择你的角色">
            <el-option label="管理员" value="admin" />
            <el-option label="用户" value="user" />
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-input v-model="form.address" type="textarea" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phonenumber"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" >
        <el-button @click="restform">取消</el-button>
        <el-button type="primary" @click="handeruser">确定</el-button
        >
      </span>
    </el-dialog>
  </div>






</template>

<script setup>

import { toRefs, reactive, onBeforeMount,ref,getCurrentInstance } from 'vue'
import { addUsers, getUsers ,updateuser,deleteUser} from '@/api/user'
let { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus'
import user from '@/store/modules/user'


const currentPage2 = ref(1)
const pageSize2 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const totaluser= ref(1)

const labelPosition = ref('left')

const usertable = ref(null);

const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})

const disableShow = ref(false)

const handleSizeChange = (number) => {
  console.log(`${number} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${number}`+pageSize2.value)
  const params ={
    "pagSizes":pageSize2,
    "pageNum":number
  }
  fetchData(params)
}

onBeforeMount(() => {
  fetchData()
})

const userForm = ref(null)

const title = ref("新增")
const state = reactive({
  tableData: null,
  listLoading: true
})
const fetchData = (params) => {
  getUsers(params).then((response) => {
    console.log('response', response)
    state.tableData = response.data
    proxy.totaluser=response.total
    state.listLoading = false
  })
}

let { tableData, listLoading } = toRefs(state)


const dialogFormVisible = ref(false)


const form = reactive( {
  title:'新增用户',
  usernamezh: '',
  username:'',
  birthdate: '',
  sex:'',
  address: '',
  cardNumber:'',
  birthAddress:'',
  level:'',
  phonenumber:'',
  mbool:false,
  wbool:false
})

const restform=()=>{
  userForm.value.resetFields();
}



const selects=(selection, row)=>{
  console.log(row)
  return row;
}

const addUser=()=>{
  proxy.dialogFormVisible = true
  userForm.value.resetFields();
}

const scTable = ref(null)

const handleUpdate=()=> {
  proxy.disableShow=true
  const rows = scTable.value.getSelectionRows()
  console.log(rows)
  if(rows.length > 0){
    form.title = "修改用户";
    proxy.dialogFormVisible=true;
    form.username=rows[0].username
    form.usernamezh = rows[0].usernamezh
    form.birthdate = rows[0].birthdate
    form.address = rows[0].address
    form.cardNumber = rows[0].cardNumber
    form.birthAddress = rows[0].birthAddress
    form.level = rows[0].level
    form.phonenumber = rows[0].phonenumber
  }else{
    ElMessage.error('请选择一条数据')
  }
}

const handleDelete=()=>{
  const rows = scTable.value.getSelectionRows()
  let param = {
    username:rows[0].username
  }
  console.log(param)
  deleteUser(param).then((response)=>{
    if(response.code == 200){
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      proxy.dialogFormVisible=false;
      fetchData();
    }else{
      ElMessage.error('删除失败')
    }
  })

}

const handeruser=()=>{
  form.sex = form.type[0]
  console.log(form)
  if(form.title == "新增用户"){
    addUsers(form).then((response)=>{
      if(response.code == 200){
        ElMessage({
          message: '新增成功',
          type: 'success',
        })
        proxy.dialogFormVisible=false;
        fetchData();
      }else{
        ElMessage.error('新增失败')
      }
    })
  }else{
    updateuser(form).then((response)=>{
      if(response.code == 200){
        debugger;
        userForm.value.resetFields();
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
        proxy.dialogFormVisible=false;
        fetchData();

      }else{
        ElMessage.error('修改失败')
      }
    })
  }

}


</script>
<style>

</style>
